<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../addons/party_member/public/css/weui.min.css">
    <link rel="stylesheet" href="../../addons/party_member/public/css/jquery-weui.min.css">

    <!-- body 最后 -->
    <script src="../../addons/party_member/public/js/jquery.min.js"></script>
    <script src="../../addons/party_member/public/js/jquery-weui.min.js"></script>

    <!-- 如果使用了某些拓展插件还需要额外的JS -->
    <script src="../../addons/party_member/public/js/swiper.min.js"></script>
    <script src="../../addons/party_member/public/js/city-picker.min.js"></script>
    <script src="../../addons/party_member/public/js/function.js"></script>
    <title>考评</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background: #f9f9f9;
        }
        .head{
            display: block;
            position: relative;
            width: 100%;
            height: 43px;
            background: #ffffff;
            text-align: center;
            font-size: 18px;
            line-height: 43px;
            font-family: -webkit-body;
            color: #333333;

        }

        .head_return{
            display: inline-block;
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 23px;
            background: url("../addons/party_member/public/image/evaluation/return.png") no-repeat;
            background-size: 12px 23px;

        }

        .banner{
            position: relative;
            display: block;
            width: 100%;
            height: 150px;
            background: url("../addons/party_member/public/image/evaluation/banner_bk.png") no-repeat;
            background-size: 100% 150px;
        }
        .banner_headPic{
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -40px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-top: 14px;
            background: url("{$userInfo['photo']}") no-repeat;
            background-size: 80px 100px;
        }

        .banner_info{
            display: block;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 10px;

        }
        .banner_info span{
            display: block;
            margin: auto;
            color: #ffffff;
        }

        .table_main{
            display: block;
            margin-top: 10px;
            width: 100%;
            height: auto;
        }
        .table_body {
            width: 100%;
            height: 260px;
            background: url(../addons/party_member/public/image/evaluation/bodybg.png);
            background-size: cover;
        }
        .table_head{
            position: absolute;
            margin-top: 20px;
            width: 100%;
            height: 20px;
            text-align: center;
            color: #333333;

        }
        .table_head span{
            display: inline-block;
            position: absolute;
            left: 0;
            height: 20px;
            border-left: 5px solid red;
            padding-left: 10px;
            color: #a7a7a7;
        }
        .table_info{
            position: relative;
            top: 40px;
            width: 100%;
            height: 220px;
        }
        .left_pic{
            position: absolute;
            width: 16px;
            height: 210px;
            background: url(../addons/party_member/public/image/evaluation/juxing.png) no-repeat;
            background-size: 20px 210px;
            left: 24px;
            top: 5px;
        }
        .grade_pic{
            display: inline-block;
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: 25px;
            background: url(../addons/party_member/public/image/evaluation/danzhang.png) no-repeat;
            background-size: 100px 100px;
            color: red;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            color: #f3555c;
        }
        .star_pic{
            display: block;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 50px;

        }
        .star_pic span{
            display: inline-block;
            margin: auto;
            width: 20px;
            height: 20px;
            background: url(../addons/party_member/public/image/evaluation/star.png) no-repeat;
            background-size: 20px 20px;
        }
        .more_info{
            margin-top: -20px;
            text-align: center;
            margin-bottom: 20px;
            color: #a7a7a7;
        }
        .more_info span{
            display: inline-block;
            width: 13px;
            height: 9px;
            background: url(../addons/party_member/public/image/evaluation/more_btn.png) no-repeat;
            background-size: 13px 9px;
        }
    </style>
</head>
<body>
    <div class="head">
        <span class="head_return"></span>
        党员考评
    </div>
    <div class="banner">
        <div class="banner_headPic"></div>
        <div class="banner_info">
            <span>{$userInfo['name']}</span>
            <span>{$userInfo['partyname']}</span>
        </div>
    </div>
    <div class="table_main">

        {loop $data['list'] $index $item}
        <div class="table_body">
            <div class="table_head">
                <span>{$item['year']}.{$item['month']}</span>
                您的本期考评
            </div>
            <div class="table_info">
                <div class="left_pic"></div>
                <div class="grade_pic">
                    {if $item["performance"]=="0" }不合格{/if}
                    {if $item["performance"]=="1" }合格{/if}
                    {if $item["performance"]=="2" }优秀{/if}
                    {if $item["performance"]=="3" }非常优秀{/if}
                </div>
                <div class="star_pic">
                    <span></span>
                    <span></span>

                    {if $item["performance"]>="1" }<span></span>{/if}
                    {if $item["performance"]>="2" }<span></span>{/if}
                    {if $item["performance"]>="3" }<span></span>{/if}
                </div>
            </div>
        </div>
        {/loop}


<!--        <div class="table_body">
        <div class="table_head">
            <span>2016</span>
            2016年考评
        </div>
        <div class="table_info">
            <div class="left_pic"></div>
            <div class="grade_pic"></div>
            <div class="star_pic">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>-->
    </div>
<!--    <div class="more_info">
        查看往期考评
        <span></span>
    </div>-->
</body>
</html>